<template>
    <div>
        <div class="mt-4 mb-4">
            <Button to="/admin/create" icon="ios-add-circle" type="primary">添加</Button>
            <Button icon="ios-trash-outline" type="error">删除选中</Button>
        </div>
        <Table @on-page-size-change='pageSizeChange' class="mt-4" border :columns="columns" :data="users"></Table>
        <Page class="mt-4" :total="total" show-sizer/>
    </div>
</template>
<script>
    export default {
        name: 'Admin',
        data() {
            return {
                total: 0,
                currentPage: 1,
                pageSize: 10,
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        width: 60,
                        align: 'center',
                        key: 'id',
                    },
                    {
                        title: '姓名',
                        width: 120,
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '邮箱',
                        key: 'email'
                    },
                    {
                        title: '头像',
                        width: 80,
                        render: (h, params) => {
                            if (params.row.avatar) {
                                let url = api.file + '/' + params.row.avatar;
                                return h('div', [
                                    h('img', {
                                        attrs: {
                                            src: url
                                        },
                                        style: {
                                            borderRadius: '20px',
                                            width: '40px',
                                            height: '40px'
                                        },
                                    })
                                ]);
                            } else {
                                return '';
                            }

                        }
                    },
                    {
                        title: '角色',
                        key: 'role',
                        render: (h, params) => {
                            return h('div', [

                                h('div', params.row.roles.map((item) => {
                                    return h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.show(params.index)
                                            }
                                        }
                                    }, item.name)
                                }))
                            ])
                        }
                    },
                    {
                        title: '启用',
                        width: 80,
                        key: 'status',
                        render: (h, params) => {
                            return h('div', [
                                h('i-switch', {
                                    props: {
                                        value: params.status
                                    },
                                    on: {
                                        'on-change': (value) => {

                                        }
                                    }
                                })
                            ])
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 180,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push({name: 'admin_edit', params: {id: params.row.id}});
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                users: []
            }
        },
        methods: {
            pageSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.fetchUsers();
            },
            show(index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.users[index].name}<br>Age：${this.users[index].age}<br>Address：${this.users[index].address}`
                })
            },
            remove(index) {
                this.users.splice(index, 1);
            },
            fetchUsers() {
                http.get('/api/admin', {
                    params: {
                        per_page: this.pageSize,
                        current_page: this.currentPage
                    }
                }).then((data) => {
                    console.log(data);
                    this.total = data.total;
                    this.users = data.data;
                    this.currentPage = data.current_page;
                });
            }
        },
        mounted() {
            this.fetchUsers();
        }
    }
</script>
